<<<<<<< HEAD
﻿*   **通用字体**: `font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;`
*   **背景色 (白色)**: `background-color: white;`
*   **卡片/区块通用样式**: `padding: 24px 16px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; margin-bottom: 20px;`


<!-- 1. 标题样式 (H1, H2, H3, Span) -->

<!-- 1.1 主标题 (H1) 样式 -->
*   `font-size: 32px;`
*   `font-weight: 700;`
*   `margin: 0 0 16px;`
*   `line-height: 1.2;`
*   `color: white;` (用于深色背景)
*   **强调部分 (H1内的Span)**: `font-weight: 900;`

<!-- 1.2 二级标题 (H2) 样式 -->
*   `font-size: 24px;`
*   `font-weight: 700;`
*   `margin: 0 0 20px;`
*   `color: rgb(24, 40, 72);`
*   **带底部线 (H2下的Span)**: `display: block; width: 64px; height: 4px; background: linear-gradient(90deg, rgb(24, 40, 72) 0%, rgb(75, 108, 183) 100%); bottom: -8px; border-radius: 2px; margin-top: 12px;`

<!-- 1.3 三级标题 (H3) 样式 -->
*   `font-size: 18px;`
*   `margin: 0 0 8px;`
*   `color: rgb(51, 51, 51);`
*   `font-weight: 700;` (可选)
*   `color: #4b6cb7;` (可选，用于标题色)
*   **小卡片内H3**: `font-size: 16px; margin: 0 0 4px; color: #333;`


<!-- 2. 段落 (P) 样式 -->

<!-- 2.1 主体内容段落 -->
*   `font-size: 16px;`
*   `line-height: 1.8;`
*   `margin: 0 0 16px;`
*   `color: rgb(66, 66, 66);`

<!-- 2.2 强调/引言段落 -->
*   `font-size: 18px;`
*   `line-height: 1.8;`
*   `margin: 0 0 16px;`
*   `font-weight: 500;`
*   `color: rgb(66, 66, 66);`

<!-- 2.3 辅助/描述段落 -->
*   `font-size: 14px;`
*   `margin: 0;`
*   `color: rgb(102, 102, 102);`
*   `line-height: 1.6;` (可选)
*   `opacity: 0.9;` (用于深色背景)

<!-- 2.4 结束语大字样式 -->
*   `font-size: 18px;`
*   `font-weight: 700;`
*   `color: #182848;`
*   `margin: 0;`
*   `text-align: center;`
*   **结束语强调词 (Span)**: `font-size: 28px;`


<!-- 3. 图片 (IMG) 样式 -->
<!-- AI需自行构建 <img alt="图片描述" src="【微信永久素材URL】" ...> -->
*   **通用图片**: `width: 100%; height: auto; object-fit: cover; display: block; max-width: 100%;`
*   **固定高度图片 (如卡片顶部)**: `width: 100%; height: 200px; object-fit: cover; display: block; max-width: 100%; max-height: 200px;`


<!-- 4. SVG 图标 (AI直接内联SVG代码) -->
<!-- AI需自行构建 <svg width="..." height="..." viewBox="..." style="..."><path fill="..." d="..."></path></svg> -->
*   **通用图标**: `width: 32px; height: 32px; margin-bottom: 8px;`
*   **小图标**: `width: 20px; height: 20px; margin-right: 8px;`
*   **大图标**: `width: 40px; height: 40px; margin: 0 auto 8px;`
*   **路径填充色 (蓝色)**: `fill: #4b6cb7;`
*   **路径填充色 (白色)**: `fill: white;`


<!-- 5. 容器/区块 (DIV) 样式 -->
<!-- AI可将H/P/IMG/SVG等元素组合放入这些div中，实现复杂布局。 -->

<!-- 5.1 渐变背景容器 (深蓝色) -->
*   `padding: 24px 16px;`
*   `background: linear-gradient(135deg, rgb(75, 108, 183) 0%, rgb(24, 40, 72) 100%);`
*   `color: white;`
*   `margin-bottom: 20px;`
*   `border-radius: 12px;`
*   `box-shadow: 0 4px 12px rgba(0,0,0,0.1);`

<!-- 5.2 渐变背景容器 (暖色) -->
*   `padding: 24px 16px;`
*   `background: linear-gradient(135deg, #fad0c4 0%, #ff9a9e 100%);`
*   `color: white;`
*   `margin: 0 0 20px;`
*   `border-radius: 12px;`
*   `box-shadow: 0 4px 12px rgba(0,0,0,0.1);`

<!-- 5.3 浅色背景容器 (默认，带阴影和圆角) -->
*   `padding: 24px 16px;`
*   `background-color: white;`
*   `border-radius: 12px;`
*   `box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;`
*   `margin: 0 0 20px;` (可选)

<!-- 5.4 浅灰色背景容器 -->
*   `padding: 24px 16px;`
*   `background-color: #f8f9fa;`
*   `border-radius: 12px;`
*   `box-shadow: 0 4px 12px rgba(0,0,0,0.05);`
*   `margin: 0 0 20px;` (可选)

<!-- 5.5 提示/引用框容器 (浅蓝色背景) -->
*   `padding: 16px;`
*   `background-color: rgb(241, 247, 254);`
*   `border-radius: 12px;`
*   `margin: 24px 0px;`

<!-- 5.6 左侧边框容器 (灰色背景，蓝色边框) -->
*   `padding: 16px;`
*   `background-color: rgb(245, 245, 245);`
*   `border-radius: 8px;`
*   `border-left: 4px solid rgb(75, 108, 183);`
*   `margin-bottom: 16px;` (可选)

<!-- 5.7 左侧边框容器 (白色背景，暖色边框) -->
*   `padding: 16px;`
*   `background-color: white;`
*   `border-radius: 12px;`
*   `border-left: 4px solid #ff9a9e;`
*   `margin: 24px 0;` (可选)

<!-- 5.8 半透明背景容器 (用于深色背景) -->
*   `padding: 12px;`
*   `background-color: rgba(255,255,255,0.1);`
*   `border-radius: 8px;`
*   `backdrop-filter: blur(5px);`
*   `margin-bottom: 12px;` (可选)
*   **更强半透明**: `background-color: rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: 20px; margin-bottom: 16px;`

<!-- 5.9 Flex布局容器 (AI应自行决定内部元素的flex属性) -->
*   **垂直方向Flex，带间隔**: `display: flex; flex-direction: column; gap: 16px; margin: 24px 0;`
*   **水平方向Flex，可换行，带间隔**: `display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0;`
*   **元素居中，带图标/文字组合**: `display: flex; align-items: center;` (用于H3或P标签的父div)
*   **卡片内flex项**: `flex: 1; min-width: 140px;` (用于水平flex内的子div)

<!-- 5.10 居中文字/元素容器 -->
*   `text-align: center;` (可用于任何需要内容居中的div或p)

<!-- 5.11 分割线容器 (AI需构建一个div) -->
*   `width: 60px; height: 4px; background: linear-gradient(90deg, #182848 0%, #4b6cb7 100%); margin: 32px auto; border-radius: 2px;`

<!-- 5.12 图片容器 (包裹图片并提供特定布局) -->
*   `width: 100%; height: 200px; flex-shrink: 0; overflow: hidden;` (用于固定高度图片外部的div)
*   `padding: 24px 16px; flex-grow: 1;` (用于图片下方的文字内容div)

<!-- 5.13 SVG图表示例 (AI可根据需要复制和修改path、circle、text) -->
<!-- AI需自行构建 <svg viewBox="0 0 240 120" style="width: 100%; height: 120px; margin-bottom: 20px;"><path...><circle...><text...></svg> -->
*   **SVG图表通用样式**: `width: 100%; height: 120px; margin-bottom: 20px;`
*   **路径**: `stroke="#ff9a9e"; stroke-width: 4; fill: none;`
*   **圆点**: `fill="#ff9a9e";`
*   **文本**: `fill="white"; font-size: 10px;`


=======
﻿*   **通用字体**: `font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;`
*   **背景色 (白色)**: `background-color: white;`
*   **卡片/区块通用样式**: `padding: 24px 16px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; margin-bottom: 20px;`


<!-- 1. 标题样式 (H1, H2, H3, Span) -->

<!-- 1.1 主标题 (H1) 样式 -->
*   `font-size: 32px;`
*   `font-weight: 700;`
*   `margin: 0 0 16px;`
*   `line-height: 1.2;`
*   `color: white;` (用于深色背景)
*   **强调部分 (H1内的Span)**: `font-weight: 900;`

<!-- 1.2 二级标题 (H2) 样式 -->
*   `font-size: 24px;`
*   `font-weight: 700;`
*   `margin: 0 0 20px;`
*   `color: rgb(24, 40, 72);`
*   **带底部线 (H2下的Span)**: `display: block; width: 64px; height: 4px; background: linear-gradient(90deg, rgb(24, 40, 72) 0%, rgb(75, 108, 183) 100%); bottom: -8px; border-radius: 2px; margin-top: 12px;`

<!-- 1.3 三级标题 (H3) 样式 -->
*   `font-size: 18px;`
*   `margin: 0 0 8px;`
*   `color: rgb(51, 51, 51);`
*   `font-weight: 700;` (可选)
*   `color: #4b6cb7;` (可选，用于标题色)
*   **小卡片内H3**: `font-size: 16px; margin: 0 0 4px; color: #333;`


<!-- 2. 段落 (P) 样式 -->

<!-- 2.1 主体内容段落 -->
*   `font-size: 16px;`
*   `line-height: 1.8;`
*   `margin: 0 0 16px;`
*   `color: rgb(66, 66, 66);`

<!-- 2.2 强调/引言段落 -->
*   `font-size: 18px;`
*   `line-height: 1.8;`
*   `margin: 0 0 16px;`
*   `font-weight: 500;`
*   `color: rgb(66, 66, 66);`

<!-- 2.3 辅助/描述段落 -->
*   `font-size: 14px;`
*   `margin: 0;`
*   `color: rgb(102, 102, 102);`
*   `line-height: 1.6;` (可选)
*   `opacity: 0.9;` (用于深色背景)

<!-- 2.4 结束语大字样式 -->
*   `font-size: 18px;`
*   `font-weight: 700;`
*   `color: #182848;`
*   `margin: 0;`
*   `text-align: center;`
*   **结束语强调词 (Span)**: `font-size: 28px;`


<!-- 3. 图片 (IMG) 样式 -->
<!-- AI需自行构建 <img alt="图片描述" src="【微信永久素材URL】" ...> -->
*   **通用图片**: `width: 100%; height: auto; object-fit: cover; display: block; max-width: 100%;`
*   **固定高度图片 (如卡片顶部)**: `width: 100%; height: 200px; object-fit: cover; display: block; max-width: 100%; max-height: 200px;`


<!-- 4. SVG 图标 (AI直接内联SVG代码) -->
<!-- AI需自行构建 <svg width="..." height="..." viewBox="..." style="..."><path fill="..." d="..."></path></svg> -->
*   **通用图标**: `width: 32px; height: 32px; margin-bottom: 8px;`
*   **小图标**: `width: 20px; height: 20px; margin-right: 8px;`
*   **大图标**: `width: 40px; height: 40px; margin: 0 auto 8px;`
*   **路径填充色 (蓝色)**: `fill: #4b6cb7;`
*   **路径填充色 (白色)**: `fill: white;`


<!-- 5. 容器/区块 (DIV) 样式 -->
<!-- AI可将H/P/IMG/SVG等元素组合放入这些div中，实现复杂布局。 -->

<!-- 5.1 渐变背景容器 (深蓝色) -->
*   `padding: 24px 16px;`
*   `background: linear-gradient(135deg, rgb(75, 108, 183) 0%, rgb(24, 40, 72) 100%);`
*   `color: white;`
*   `margin-bottom: 20px;`
*   `border-radius: 12px;`
*   `box-shadow: 0 4px 12px rgba(0,0,0,0.1);`

<!-- 5.2 渐变背景容器 (暖色) -->
*   `padding: 24px 16px;`
*   `background: linear-gradient(135deg, #fad0c4 0%, #ff9a9e 100%);`
*   `color: white;`
*   `margin: 0 0 20px;`
*   `border-radius: 12px;`
*   `box-shadow: 0 4px 12px rgba(0,0,0,0.1);`

<!-- 5.3 浅色背景容器 (默认，带阴影和圆角) -->
*   `padding: 24px 16px;`
*   `background-color: white;`
*   `border-radius: 12px;`
*   `box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;`
*   `margin: 0 0 20px;` (可选)

<!-- 5.4 浅灰色背景容器 -->
*   `padding: 24px 16px;`
*   `background-color: #f8f9fa;`
*   `border-radius: 12px;`
*   `box-shadow: 0 4px 12px rgba(0,0,0,0.05);`
*   `margin: 0 0 20px;` (可选)

<!-- 5.5 提示/引用框容器 (浅蓝色背景) -->
*   `padding: 16px;`
*   `background-color: rgb(241, 247, 254);`
*   `border-radius: 12px;`
*   `margin: 24px 0px;`

<!-- 5.6 左侧边框容器 (灰色背景，蓝色边框) -->
*   `padding: 16px;`
*   `background-color: rgb(245, 245, 245);`
*   `border-radius: 8px;`
*   `border-left: 4px solid rgb(75, 108, 183);`
*   `margin-bottom: 16px;` (可选)

<!-- 5.7 左侧边框容器 (白色背景，暖色边框) -->
*   `padding: 16px;`
*   `background-color: white;`
*   `border-radius: 12px;`
*   `border-left: 4px solid #ff9a9e;`
*   `margin: 24px 0;` (可选)

<!-- 5.8 半透明背景容器 (用于深色背景) -->
*   `padding: 12px;`
*   `background-color: rgba(255,255,255,0.1);`
*   `border-radius: 8px;`
*   `backdrop-filter: blur(5px);`
*   `margin-bottom: 12px;` (可选)
*   **更强半透明**: `background-color: rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: 20px; margin-bottom: 16px;`

<!-- 5.9 Flex布局容器 (AI应自行决定内部元素的flex属性) -->
*   **垂直方向Flex，带间隔**: `display: flex; flex-direction: column; gap: 16px; margin: 24px 0;`
*   **水平方向Flex，可换行，带间隔**: `display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0;`
*   **元素居中，带图标/文字组合**: `display: flex; align-items: center;` (用于H3或P标签的父div)
*   **卡片内flex项**: `flex: 1; min-width: 140px;` (用于水平flex内的子div)

<!-- 5.10 居中文字/元素容器 -->
*   `text-align: center;` (可用于任何需要内容居中的div或p)

<!-- 5.11 分割线容器 (AI需构建一个div) -->
*   `width: 60px; height: 4px; background: linear-gradient(90deg, #182848 0%, #4b6cb7 100%); margin: 32px auto; border-radius: 2px;`

<!-- 5.12 图片容器 (包裹图片并提供特定布局) -->
*   `width: 100%; height: 200px; flex-shrink: 0; overflow: hidden;` (用于固定高度图片外部的div)
*   `padding: 24px 16px; flex-grow: 1;` (用于图片下方的文字内容div)

<!-- 5.13 SVG图表示例 (AI可根据需要复制和修改path、circle、text) -->
<!-- AI需自行构建 <svg viewBox="0 0 240 120" style="width: 100%; height: 120px; margin-bottom: 20px;"><path...><circle...><text...></svg> -->
*   **SVG图表通用样式**: `width: 100%; height: 120px; margin-bottom: 20px;`
*   **路径**: `stroke="#ff9a9e"; stroke-width: 4; fill: none;`
*   **圆点**: `fill="#ff9a9e";`
*   **文本**: `fill="white"; font-size: 10px;`


>>>>>>> 4939a71745bd4c2b6983a54b58451f6e8eb98712
